import { StyledCalendar, StyledColumn } from './style'
import dayjs, { Dayjs } from 'dayjs'
import customParseFormat from 'dayjs/plugin/customParseFormat'
dayjs.extend(customParseFormat)

const TIME = new Array(24).fill(0).map((_, i) => (i > 9 ? `${i}:00` : `0${i}:00`))

function percentOfDay(time: Dayjs) {
	return ((time.hour() + time.minute() / 60) / 24) * 100 + '%'
}

interface ColumnBackgroundProps {
	cellDivide?: number
	currentTime?: Dayjs
}

type ColumnLeftProps = Required<Pick<ColumnBackgroundProps, 'currentTime'>>

const ColumnLeft = ({ currentTime }: ColumnLeftProps) => {
	return (
		<StyledColumn w={70}>
			{TIME.map((t, index) => {
				return (
					<div className="cell" key={t}>
						<p className="times">{t}</p>
					</div>
				)
			})}
			<div className="current-time-triangle" style={{ top: percentOfDay(currentTime) }}></div>
		</StyledColumn>
	)
}
const ColumnBackground = ({ cellDivide = 4, currentTime }: ColumnBackgroundProps) => {
	return (
		<StyledColumn background={currentTime ? '#ffffd6' : ''}>
			{TIME.map((t, index) => {
				return (
					<div className="cell" key={t}>
						{Array.from({ length: cellDivide }).map((x, i) => (
							<div className="dotted-slot" key={i}></div>
						))}
					</div>
				)
			})}
			{currentTime && <div className="current-time-line" style={{ top: percentOfDay(currentTime) }}></div>}
		</StyledColumn>
	)
}

export const Calendar = () => {
	const currentTime = dayjs('14:22', 'HH:mm')
	return (
		<StyledCalendar>
			<div className="calendar-header"></div>
			<div className="calendar-body">
				<ColumnLeft currentTime={currentTime}></ColumnLeft>
				<ColumnBackground></ColumnBackground>
				<ColumnBackground currentTime={currentTime}></ColumnBackground>
			</div>
		</StyledCalendar>
	)
}
